<template>
  <div class="box">
    <div class="top card">
      <div class="title">客户信息</div>
      <div class="info">
        <div class="infoItem">
          <div>
            <span class="infoItemLabel">客户全称：</span
            ><span>{{ dataInfo.value }}</span>
          </div>
          <div>
            <span class="infoItemLabel">客户编码：</span
            ><span>{{ dataInfo.customerID }}</span>
          </div>
        </div>
        <div class="infoItem">
          <!-- <div>
            <span class="infoItemLabel">信用评级：</span
            ><span>{{ dataInfo.custRating }}</span>
          </div> -->
          <div>
            <span class="infoItemLabel">累计销售规模：</span
            ><span>{{ dataInfo.cumlativeAmount | filterNum }}</span>
          </div>
        </div>
        <div class="infoItem">
          <div>
            <span class="infoItemLabel">公司地址：</span
            ><span>{{ dataInfo.address }}</span>
          </div>
          <div>
            <span class="infoItemLabel">累计销售只数：</span
            ><span>{{ dataInfo.cumlativeSize }}</span>
          </div>
        </div>
      </div>
      <div class="btn_obj">
        <!-- <button @click="dialogFormVisible = true">切换对象</button> -->
      </div>
      <el-dialog title="请选择" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="客户编号" :label-width="formLabelWidth">
            <el-select
              v-model="form.region"
              placeholder="请选择客户编号"
              @change="selectChange"
              filterable
            >
              <el-option
                v-for="item in this.selectOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称" :label-width="formLabelWidth">
            <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="btn" @click="dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button class="btn" type="primary" @click="handleOkInfo"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
    <div class="bottom">
      <div class="bot_left card">
        <div class="left_title">全部标签</div>
        <div>
          <el-tree
            :data="data"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick"
            :default-expand-all="true"
          >
          </el-tree>
        </div>
      </div>
      <div class="bot_right card">
        <div class="right_title">标签列表</div>
        <div class="search_arae">
          <div>
            <el-input
              v-model="input"
              width="200px"
              @change="getInputTable"
              placeholder="请输入标签值"
              suffix-icon="el-icon-search"
            ></el-input>
          </div>
          <div>
            <el-select
              clearable
              v-model="value"
              @change="getInputTable"
              placeholder="请选择标签生成方法"
            >
              <el-option
                v-for="item in labelMethods"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="labelTheme" label="所属主题" width="180">
            </el-table-column>
            <el-table-column prop="labelSubTheme" label="所属子类">
            </el-table-column>
            <el-table-column prop="labelNM" label="标签"> </el-table-column>
            <el-table-column prop="labelMethod" label="生成方法">
            </el-table-column>
            <el-table-column prop="assessTime" label="生成时间">
            </el-table-column>
            <!-- <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="deleteLabels(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <div class="pages">
            <el-pagination
              small
              background
              layout="prev, pager, next"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
              :total="pageInfo.total"
              @current-change="pageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTagsTree,
  getCustomerInfo,
  getTagsTable,
  queryLabelMethod,
  deleteLabels,
} from "@/api/eigen/objectQuery.js";
export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
      },
      selectInfo: {},
      dataInfo: {
        customerID: "",
      },
      totalResults: "",
      selectOption: [],
      formLabelWidth: "120px",
      restaurants: [],
      state: "",
      timeout: null,
      data: [],
      defaultProps: {
        children: "childrenList",
        label: "themeNm",
      },
      input: "",
      value: "",
      page: "1",
      pn: "10",
      labelMethods: [],
      tableData: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      labelTheme: "",
    };
  },
  filters: {
    filterNum(value) {
      const str = value ? value.toString() : "";
      if (str) {
        const reg =
          str.indexOf(".") > -1 ? /\B(?=(\d{3})+\.)/g : /\B(?=(\d{3})+$)/g;
        const returnData = str.replace(reg, ",");
        return returnData;
      } else {
        return "";
      }
    },
  },
  created() {
    this.getData();
    this.loadAll();
    this.getLabelMethod();
  },
  methods: {
    handleNodeClick(data) {
      console.info(data);
      this.labelTheme = data.themeNm;
      this.getTableData();
    },
    getData() {
      getTagsTree().then((res) => {
        let datas = [];
        let obj = {};
        res.data.forEach((item) => {
          obj = {
            themeNm: item.themeNm,
            childrenList: item.childrenList.map((item) => {
              return { themeNm: item };
            }),
          };
          datas.push(obj);
        });
        this.data = datas;
      });
    },
    getTableData() {
      let _this = this;
      this.pageInfo.pageNum = 1;
      getTagsTable({
        labelNM: _this.input,
        labelMethod: _this.value,
        labelSubTheme: _this.labelTheme,
        customerId: _this.dataInfo.customerID,
        page: _this.pageInfo.pageNum,
        pn: _this.pageInfo.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.result;
          this.pageInfo.total = parseInt(res.data.totalResults);
        }
      });
    },
    getInputTable() {
      this.getTableData();
    },
    loadAll() {
      getCustomerInfo().then((res) => {
        if (res.code === 200) {
          this.restaurants = res.data.result.map((item) => {
            return {
              value: item.customerNM,
              address: item.comAddress,
              riskAttItudeNM: item.riskAttItudeNM,
              custRating: item.custRating,
              cumlativeAmount: item.cumlativeAmount,
              cumlativeSize: item.cumlativeSize,
              customerID: item.customerID,
            };
          });
          this.selectOption = res.data.result.map((item) => {
            return item.customerID;
          });
        }
      });
    },
    querySearchAsync(queryString, cb) {
      // var restaurants = this.restaurants;
      var restaurants = queryString
        ? this.restaurants.filter(this.createStateFilter(queryString))
        : this.restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(restaurants);
      }, 500 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          // state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          state.value.includes(queryString)
        );
      };
    },
    handleSelect(e) {
      this.selectInfo = e;
      this.form.region = e.customerID;
    },
    selectChange(e) {
      const items = this.restaurants.find((item) => item.customerID === e);
      this.selectInfo = items;
      this.state = items.value;
    },
    getLabelMethod() {
      let _this = this;
      queryLabelMethod({}).then((res) => {
        _this.labelMethods = res.data;
      });
    },
    handleOkInfo() {
      this.dialogFormVisible = false;
      this.dataInfo = this.selectInfo;
      this.getTableData();
    },
    pageChange(e) {
      this.pageInfo.pageNum = e;
      getTagsTable({
        labelNM: this.input,
        labelMethod: this.value,
        labelSubTheme: this.labelTheme,
        customerId: this.dataInfo.customerID,
        page: this.pageInfo.pageNum,
        pn: this.pageInfo.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data.result;
          this.pageInfo.total = parseInt(res.data.totalResults);
        }
      });
    },
    deleteLabels(row) {
      console.info(row);
      let _this = this;
      if (row && row.labelId) {
        deleteLabels({
          customerId: _this.dataInfo.customerID,
          labelId: row.labelId,
        }).then((res) => {
          this.getTableData();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.el-select {
  width: 50%;
}

::v-deep .el-form .el-form-item .el-form-item__content .el-input__inner {
  width: 100%;
}

::v-deep .el-autocomplete {
  width: 50%;
}

.box {
  display: flex;
  flex-direction: column;

  .card {
    padding: 10px;
    background-color: #262d47;
    color: #959fc5;
  }

  .top {
    .title {
      font-size: 16px;
    }

    .info {
      display: flex;
      padding: 10px;

      .infoItem {
        flex: 1;

        div:not(:last-child) {
          margin-bottom: 10px;
        }
      }
    }

    .btn_obj {
      text-align: right;

      button {
        outline: none;
        background: #2b4267;
        border: none;
        padding: 5px 10px;
        color: #fff;
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    height: 100%;
    margin-top: 10px;

    .bot_left {
      width: 15%;
      background-color: #262d47;
      height: 100%;
      margin-right: 10px;

      .left_title {
        font-size: 16px;
        margin-bottom: 10px;
      }
    }

    .bot_right {
      flex: 1;
      background-color: #262d47;
      height: 100%;

      .right_title {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .search_arae {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 10px;

        div {
          width: 200px;
          margin-right: 15px;
        }
      }
    }
  }
}

.pages {
  margin-top: 10px;
  text-align: right;
}

.el-tree {
  background: none;
  color: #959fc5;
}

.el-tree ::v-deep .el-tree-node:focus > .el-tree-node__content {
  background: #1c2238;
}

::v-deep .el-tree-node__content:hover,
.el-upload-list__item:hover {
  background: none;
}

.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}
</style>
